class Vue {
    constructor(options) {
        this.$options = options
        this._data = options.data
        this.initData()
    }

    initData() {
        const data = this._data
        const keys = Object.keys(data)
        // 将data里所有key代理到vue实例上
        for(let key of keys) {
            Object.defineProperty(this, key, {
                enumerable: true,
                configurable: true,
                get: function proxyGetter() {
                    return data[key]
                },
                set: function proxySetter(val) {
                    data[key] = val
                }
            })
        }

        observe(data)
    }
}

function isObject(obj) {
    return obj !== null && typeof obj === 'object'
}
// 判断当前观察data类型，如果是对象创建Observe对象进行reactive
function observe(data) {
    if(!isObject(data)) return
    new Observer(data)
}
class Observer {
    constructor(data) {
        this.walk(data)
    }
    walk(data) {
        const keys = Object.keys(data)
        for(let key of keys) {
            let value = data[key]
            defineReactive(data, key, value)
        }
    }
}

function defineReactive(obj, key, value) {
    observe(obj[key])
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter(){
            console.log(`data的${key}取值`)
            return value
        },
        set: function reactiveSetter(val) {
            if(val === value) {
                return
            }
            console.log(`设置${key}为${val}`)
            value = val
        }
    })
}
let vm = new Vue({
    data:{
      message:'hello vue.js',
      person:{
        name:'zs',
        city:{
          cityName:'wuhan'
        }
      }
    }
  })
  //vm.person.name = 'ls'
  vm.person.city.cityName = 'beijing'
